<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js Demo</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <style>
        canvas {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
    var canvas = document.getElementById("renderCanvas");
    var engine = new BABYLON.Engine(canvas, true);

    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    var shapes = ["box", "sphere", "cylinder", "torus"];
    var shapeSize = 2;
    var rowCount = 5;
    var colCount = 5;

    for (var i = 0; i < rowCount; i++) {
        for (var j = 0; j < colCount; j++) {
            var randomShape = shapes[Math.floor(Math.random() * shapes.length)];
            var shape;

            switch (randomShape) {
                case "box":
                    shape = BABYLON.MeshBuilder.CreateBox("box" + i + "_" + j, {size: shapeSize}, scene);
                    break;
                case "sphere":
                    shape = BABYLON.MeshBuilder.CreateSphere("sphere" + i + "_" + j, {diameter: shapeSize}, scene);
                    break;
                case "cylinder":
                    shape = BABYLON.MeshBuilder.CreateCylinder("cylinder" + i + "_" + j, {height: shapeSize, diameterTop: shapeSize / 2, diameterBottom: shapeSize / 2}, scene);
                    break;
                case "torus":
                    shape = BABYLON.MeshBuilder.CreateTorus("torus" + i + "_" + j, {diameter: shapeSize / 2, thickness: shapeSize / 4}, scene);
                    break;
            }

            shape.position = new BABYLON.Vector3(i * shapeSize * 2, 0, j * shapeSize * 2);
        }
    }
    // 创建平行光源
    var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), scene);

    // 设置光源的颜色
    light.diffuse = new BABYLON.Color3(1, 1, 1); // 设置为白色光源

    // 调整光源位置
    light.position = new BABYLON.Vector3(0, 10, 0);

    // 将光源添加到场景中
    scene.addLight(light);

    engine.runRenderLoop(function () {
        scene.render();
    });

</script>
</body>
</html>
